<section>
  <d-panel [type]="'primary'" #panel [isCollapsed]="isCollapsed" [showAnimation]="true">
    <d-panel-header>
      <em class="icon icon-select-arrow" [ngClass]="{ open: panel.isCollapsed }"></em>
      Panel with foldable
    </d-panel-header>
    <d-panel-body>This is body</d-panel-body>
  </d-panel>
  <br /><br />
  <d-panel #anotherPanel [isCollapsed]="isCollapsed" [hasLeftPadding]="false" [showAnimation]="true">
    <d-panel-header>
      <em class="icon icon-select-arrow" [ngClass]="{ open: anotherPanel.isCollapsed }"></em>
      Panel has no left padding
    </d-panel-header>
    <d-panel-body>This is body</d-panel-body>
  </d-panel>
  <br /><br />
  <d-panel>
    <d-panel-header>Panel with header and footer</d-panel-header>
    <d-panel-body>This is body</d-panel-body>
    <d-panel-footer>This is footer</d-panel-footer>
  </d-panel>
  <br /><br />
  <d-panel [type]="'primary'" [isCollapsed]="isCollapsed"> only body </d-panel>
</section>
